import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  FileText, 
  MapPin, 
  Settings, 
  Calculator,
  Shield,
  CheckCircle,
  Leaf,
  Clock,
  DollarSign
} from 'lucide-react';

export default function PreviewConfirmStep({ data, crossingPoints, projects }) {
  const selectedCrossingPoint = crossingPoints.find(cp => cp.id === data.crossingPointId);
  const selectedProject = projects.find(p => p.id === selectedCrossingPoint?.projectId);

  const getMethodLabel = (method) => {
    const labels = {
      helicopterStringing: '直升机展放',
      droneStringing: '无人机牵引',
      rocketStringing: '火箭炮牵引',
      cableCraneStringing: '索道展放',
      scaffoldingErection: '搭设跨越架',
      manualStringing: '人工架线',
      vehicleStringing: '车辆牵引'
    };
    return labels[method] || method;
  };

  const calculateNettingLength = () => {
    const Bw = parseFloat(data.crossedObjectWidth) || 0;
    const B = parseFloat(data.nettingWidth) || 0;
    const alpha = parseFloat(data.crossingAngle) || 90;
    const Lb = parseFloat(data.windDeflectionDepth) || 0;

    if (Bw > 0 && B > 0 && alpha > 0) {
      const alphaRad = alpha * (Math.PI / 180);
      const La = Bw / Math.sin(alphaRad) + B / Math.tan(alphaRad) + 2 * Lb;
      return La.toFixed(2);
    }
    return null;
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
          <FileText className="w-6 h-6 text-green-600" />
        </div>
        <div>
          <h2 className="text-xl font-bold text-gray-900">方案预览确认</h2>
          <p className="text-gray-600">请检查方案信息，确认无误后即可创建</p>
        </div>
      </div>

      {/* 方案基本信息摘要 */}
      <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
        <CardHeader>
          <CardTitle className="text-blue-900">方案基本信息</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
              <span className="text-blue-600 font-medium">方案名称:</span>
              <div className="font-semibold">{data.name || '未命名'}</div>
            </div>
            <div>
              <span className="text-blue-600 font-medium">方案版本:</span>
              <div className="font-semibold">{data.version || '1.0'}</div>
            </div>
            <div>
              <span className="text-blue-600 font-medium">施工方法:</span>
              <div className="font-semibold">{getMethodLabel(data.constructionMethod)}</div>
            </div>
            {selectedProject && (
              <>
                <div>
                  <span className="text-blue-600 font-medium">关联项目:</span>
                  <div className="font-semibold">{selectedProject.name}</div>
                </div>
                <div>
                  <span className="text-blue-600 font-medium">电压等级:</span>
                  <div className="font-semibold">{selectedProject.voltageLevel}</div>
                </div>
              </>
            )}
            {selectedCrossingPoint && (
              <div>
                <span className="text-blue-600 font-medium">跨越点:</span>
                <div className="font-semibold">{selectedCrossingPoint.name}</div>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <Tabs defaultValue="overview" className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="overview">工程概况</TabsTrigger>
          <TabsTrigger value="method">施工方法</TabsTrigger>
          <TabsTrigger value="calculations">技术计算</TabsTrigger>
          <TabsTrigger value="measures">安全措施</TabsTrigger>
          <TabsTrigger value="schedule">工期计划</TabsTrigger>
        </TabsList>

        {/* 工程概况 */}
        <TabsContent value="overview" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="w-5 h-5 text-green-600" />
                工程概况
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {selectedCrossingPoint && (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <span className="text-gray-600">跨越对象:</span>
                    <div className="font-medium">{selectedCrossingPoint.crossingObject}</div>
                  </div>
                  <div>
                    <span className="text-gray-600">跨越类型:</span>
                    <div className="font-medium">{selectedCrossingPoint.crossingType}</div>
                  </div>
                  <div>
                    <span className="text-gray-600">档距:</span>
                    <div className="font-medium">{selectedCrossingPoint.spanLength}m</div>
                  </div>
                  <div>
                    <span className="text-gray-600">跨越高度:</span>
                    <div className="font-medium">{selectedCrossingPoint.crossingHeight}m</div>
                  </div>
                  <div>
                    <span className="text-gray-600">难度等级:</span>
                    <Badge variant="outline">{selectedCrossingPoint.difficultyLevel}</Badge>
                  </div>
                  <div>
                    <span className="text-gray-600">优先级:</span>
                    <Badge variant="outline">{selectedCrossingPoint.priority}</Badge>
                  </div>
                </div>
              )}

              {data.scopeOfWork && (
                <div>
                  <span className="text-gray-600">主要工作内容:</span>
                  <div className="bg-gray-50 p-3 rounded-lg mt-1">{data.scopeOfWork}</div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 施工方法 */}
        <TabsContent value="method" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5 text-purple-600" />
                施工方法详情
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <span className="text-gray-600">选择的施工方法:</span>
                <div className="text-lg font-semibold text-purple-700">
                  {getMethodLabel(data.constructionMethod)}
                </div>
              </div>

              {data.methodReasoning && (
                <div>
                  <span className="text-gray-600">选择理由:</span>
                  <div className="bg-purple-50 p-3 rounded-lg mt-1 border border-purple-200">
                    {data.methodReasoning}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 技术计算 */}
        <TabsContent value="calculations" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calculator className="w-5 h-5 text-blue-600" />
                技术计算结果
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* 封网计算 */}
              {(data.crossedObjectWidth || data.nettingWidth) && (
                <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
                  <h4 className="font-semibold text-blue-900 mb-3">封网参数计算</h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                    <div>
                      <span className="text-blue-600">被跨越物宽度:</span>
                      <div className="font-medium">{data.crossedObjectWidth || '--'} m</div>
                    </div>
                    <div>
                      <span className="text-blue-600">封网宽度:</span>
                      <div className="font-medium">{data.nettingWidth || '--'} m</div>
                    </div>
                    <div>
                      <span className="text-blue-600">交叉角度:</span>
                      <div className="font-medium">{data.crossingAngle || '--'}°</div>
                    </div>
                    <div>
                      <span className="text-blue-600">延伸长度:</span>
                      <div className="font-medium">{data.windDeflectionDepth || '--'} m</div>
                    </div>
                  </div>
                  <div className="mt-3 p-2 bg-green-100 rounded border border-green-200">
                    <span className="text-green-700 font-medium">计算封网长度: </span>
                    <span className="text-green-800 font-bold text-lg">
                      {calculateNettingLength() ? `${calculateNettingLength()} m` : '参数不足'}
                    </span>
                  </div>
                </div>
              )}

              {/* 张力校核 */}
              {(data.conductorType || data.designTension) && (
                <div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
                  <h4 className="font-semibold text-orange-900 mb-3">张力校核参数</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
                    <div>
                      <span className="text-orange-600">导线类型:</span>
                      <div className="font-medium">{data.conductorType || '--'}</div>
                    </div>
                    <div>
                      <span className="text-orange-600">校核档距:</span>
                      <div className="font-medium">{data.spanLength_for_tension || data.spanLength || '--'} m</div>
                    </div>
                    <div>
                      <span className="text-orange-600">设计张力:</span>
                      <div className="font-medium">{data.designTension || '--'} kN</div>
                    </div>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* 安全措施 */}
        <TabsContent value="measures" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* 安全措施 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="w-5 h-5 text-red-600" />
                  安全措施
                </CardTitle>
              </CardHeader>
              <CardContent>
                {data.safetyMeasures && data.safetyMeasures.length > 0 ? (
                  <ul className="space-y-2">
                    {data.safetyMeasures.map((measure, index) => (
                      <li key={index} className="flex items-start gap-2">
                        <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                        <span className="text-sm">{measure}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500 text-sm">暂无安全措施</p>
                )}
              </CardContent>
            </Card>

            {/* 质量措施 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-green-600" />
                  质量措施
                </CardTitle>
              </CardHeader>
              <CardContent>
                {data.qualityMeasures && data.qualityMeasures.length > 0 ? (
                  <ul className="space-y-2">
                    {data.qualityMeasures.map((measure, index) => (
                      <li key={index} className="flex items-start gap-2">
                        <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                        <span className="text-sm">{measure}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500 text-sm">暂无质量措施</p>
                )}
              </CardContent>
            </Card>

            {/* 环保措施 */}
            <Card className="md:col-span-2">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Leaf className="w-5 h-5 text-green-600" />
                  环保措施
                </CardTitle>
              </CardHeader>
              <CardContent>
                {data.environmentalMeasures && data.environmentalMeasures.length > 0 ? (
                  <ul className="space-y-2">
                    {data.environmentalMeasures.map((measure, index) => (
                      <li key={index} className="flex items-start gap-2">
                        <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                        <span className="text-sm">{measure}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500 text-sm">暂无环保措施</p>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* 工期计划 */}
        <TabsContent value="schedule" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock className="w-5 h-5 text-blue-600" />
                工期安排
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {data.startDate && (
                  <div>
                    <span className="text-gray-600">计划开工日期:</span>
                    <div className="font-medium">{data.startDate}</div>
                  </div>
                )}
                {data.endDate && (
                  <div>
                    <span className="text-gray-600">计划完工日期:</span>
                    <div className="font-medium">{data.endDate}</div>
                  </div>
                )}
              </div>

              {data.weatherRequirements && (
                <div>
                  <span className="text-gray-600">天气要求:</span>
                  <div className="bg-yellow-50 p-3 rounded-lg mt-1 border border-yellow-200">
                    {data.weatherRequirements}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 编制依据预览 */}
      {data.compilationBasis && (
        <Card>
          <CardHeader>
            <CardTitle>编制依据</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="bg-gray-50 p-4 rounded-lg">
              <pre className="whitespace-pre-wrap text-sm">{data.compilationBasis}</pre>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}